<template>
  <div>
      <el-card class="box-card" v-if="topData.length !== 0" style="margin-bottom:1%;">
        <div slot="header" class="clearfix">
          <span>{{topTitle}}</span>
        </div>
        <el-row>
        <el-col :span="8" v-for="(item,index) in topData" :key="'detail'+index">
          <span class="label">
            {{item.label}}
          </span>
          <span class="value">
            {{item.value}}
          </span>
        </el-col>
      </el-row>
      </el-card>
      <el-card class="box-card" v-if="bottomData.length !== 0"  style="margin-bottom:1%;">
        <div slot="header" class="clearfix">
          <span>{{bottomTitle}}</span>
        </div>
      </el-card>
    </div>
</template>
<script>
export default {
  props: {
    topTitle: {
      type: String,
      default: '详情'
    },
    bottomTitle: {
      type: String,
      default: '详情'
    },
    topData: {
      type: Array,
      default: []
    },
    bottomData: {
      type: Array,
      default: []
    },
    labelWidth: {
      type: Number,
      default: 100
    }
  }
}
</script>
<style lang="scss" scoped>
.label{display:inline-block;width:30%;float:left;}
.value{display:inline-block;width: 70;float:left;}
</style>

